<template>
  <el-form ref="form" :model="articleClass" :rules="formRules" @change="onChange">
    <el-form-item prop="title">
      <el-input placeholder="标题" v-model="articleClass.title" />
    </el-form-item>
    <el-form-item>
      <el-switch v-model="articleClass.visible" active-text="可见" @change="onChange"></el-switch>
    </el-form-item>
    <el-form-item>
      <el-input-number
          v-model="articleClass.orderNum"
          :min="0"
          :max="999"
          placeholder="排序"
          @change="onChange"
      />
    </el-form-item>
  </el-form>
</template>

<script lang="ts">
import ArticleClass from "@/domain/ArticleClass";
import {Options, Vue} from "vue-class-component";

@Options({
  name: "ArticleClassForm"
})
export default class ArticleClassForm extends Vue{
  modelValue!: ArticleClass
  articleClass: ArticleClass
  formRules!: any

  data(): any{
    return {
      articleClass: {title: "", visible: true},
      formRules: {
        title: [
          {required: true, message: '请输入标题', trigger: 'blur'},
          {min: 2, message: "至少输入两个字符", trigger: "blur"}
        ],
      }
    }
  }

  onChange(){
    if(this.$attrs.modelValue) Object.assign(this.$attrs.modelValue, this.articleClass);
  }

  validate(): Promise<boolean>{
    return new Promise<boolean>(resolve => {
      const form = this.$refs.form as any;
      form.validate((valid: boolean)=>{
        if(valid){
          resolve(true)
        }else {
          resolve(false)
          return false
        }
      })
    });
  }
}
</script>

<style scoped>

</style>
